<template>
<dv-border-box-1 style="padding:.2rem;">
    <div id="pigAmount" style="width: 100%; height: 100%;">
    </div>
</dv-border-box-1>
</template>

<script>
import * as echarts from 'echarts';
export default {
    props: {
        pigAmount: Object
    },
    data() {
        return {
            // 公猪数量
            boar: this.pigAmount.boar,
            // 母猪数量
            sow: this.pigAmount.sow
        }
    },
    mounted() {
        // console.log(document.getElementById('pigAmount'))
        this.pigAmountChart();
    },
    updated() {
        
    },
    watch: {

    },
    methods: {
        pigAmountChart() {
            var img = '';
            var trafficWay = [{
                name: '公猪',
                value: this.boar
            },{
                name: '母猪',
                value: this.sow
            }];
            var option;
            var data = [];
            var color=['#00ffff','#006ced','#ffe000','#ffa800','#ff5b00','#ff3000']
            for (var i = 0; i < trafficWay.length; i++) {
                data.push({
                    value: trafficWay[i].value,
                    name: trafficWay[i].name,
                    itemStyle: {
                        normal: {
                            borderWidth: 5,
                            shadowBlur: 20,
                            borderColor:color[i],
                            shadowColor: color[i]
                        }
                    }
                }, {
                    value: 2,
                    name: '',
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            color: 'rgba(0, 0, 0, 0)',
                            borderColor: 'rgba(0, 0, 0, 0)',
                            borderWidth: 0
                        }
            }
                });
            }
            var seriesOption = [{
                name: '',
                type: 'pie',
                clockWise: false,
                radius: [105, 119],
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'outside',
                            color: '#ddd',
                            formatter: function(params) {
                                var percent = 0;
                                var total = 0;
                                for (var i = 0; i < trafficWay.length; i++) {
                                    total += trafficWay[i].value;
                                }
                                percent = ((params.value / total) * 100).toFixed(0);
                                if(params.name !== '') {
                                    return params.name +'数量' +params.value + '\n' + '\n' + '占百分比：' + percent + '%';
                                }else {
                                    return '';
                                }
                            },
                        },
                        labelLine: {
                            length:20,
                            length2:10,
                            show: true,
                            color:'#00ffff'
                        }
                    }
                },
                data: data
            }];
            option = {
                // backgroundColor: 'rgba(19, 25, 47, 0.6)',
                color : color,
                title: {
                    text: '生猪数量',
                    top: '48%',
                    textAlign: "center",
                    left: "49%",
                    textStyle: {
                        color: '#fff',
                        fontSize: 22,
                        fontWeight: '400'
                    }
                },
                graphic: {
                elements: [{
                    type: "image",
                    z: 3,
                    style: {
                        image: img,
                        width: 178,
                        height: 178
                    },
                    left: 'center',
                    top:  'center',
                    position: [100, 100]
                }]
                },
                tooltip: {
                    show: false
                },
                legend: {
                    icon: "circle",
                    orient: 'horizontal',
                    // x: 'left',
                    right: 340,
                    bottom: 10,
                    align: 'right',
                    textStyle: {
                    color: "#fff"
                    },
                    itemGap: 20
                },
                toolbox: {
                    show: false
                },
                series: seriesOption
            }
            if (option && typeof option === 'object') {
               echarts.init(document.getElementById("pigAmount")).setOption(option);
            }
        }
    }
}
</script>

<style>

</style>